<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2023-12-27 15:53:10
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2023-12-27 21:15:46
 * @FilePath: \ele-h5\src\views\tabs\home\components\ScrollBar.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { useInterval } from '@/use/useInterval'
import { useTimeout } from '@/use/useTimeout'
import type { IScrollBarInfo } from '@/types'
interface IProps {
  intervalTime: number
  transitionTime: number
  height?: number
  data: IScrollBarInfo[]
}

// 设置默认值
const props = withDefaults(defineProps<IProps>(), {
  intervalTime: 3000,
  transitionTime: 1000,
  height: 40
})

const containerRef = ref()

const heightPx = `${props.height}px`

onMounted(() => {
  // scrollBar的滚动
  const container = containerRef.value
  const count = container.children.length
  const firstSwiperItem = container.children[0]
  let index = 0
  useInterval(() => {
    index++
    if (index >= count) {
      // 重新调整container首个元素位置
      firstSwiperItem.style.transform = `translateY(${index * props.height}px)`
      const timer = setTimeout((): void => {
        firstSwiperItem.style.transform = ''
        container.style.transform = ''
        container.style.transition = ''
        clearTimeout(timer)
      }, props.transitionTime)
    }
    container.style.transform = `translateY(-${index * props.height}px)`
    container.style.transition = `all linear ${props.transitionTime}ms`
    index = index % count
  }, props.intervalTime)
})

</script>

<template>
  <div class="home-scroll-bar">
    <div class="home-scroll-bar__swipe">
      <div ref="containerRef">
        <div class="swipe-item" v-for="item in props.data" :key="item.type">
          <div class="scroll-bar__info" :class="`scroll-bar__info__${item.type}`">
            <span class="info-badge">{{ item.badge }}</span>
            <span class="info-detail" v-html="item.detail"></span>
            <span class="infor-btn op-thin-border">{{ item.btn }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.home-scroll-bar {
  --bean-color: rgb(252, 164, 40);
  --hongbao-color: rgb(252, 68, 25);
  &__swipe {
    background: white;
    border-radius: 8px;
    margin: 5px 10px;
    font-size: 13px;
    position: relative;
    overflow: hidden;
    // 通过v-bind使用定义的高度
    height: v-bind(heightPx);
    .swipe-item {
      height: v-bind(heightPx);
    }
  }
  .scroll-bar__info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    height: 100%;

    .info-badge {
      border-radius: 5px;
      padding: 2px 6px;
      color: white;
      margin-right: 6px;
      font-size: 12px;
    }
    .info-detail {
      flex: 1;
    }
    .info-btn {
      padding: 3px 14px;
      font-size: 12px;
      &.op-thin-border:before {
        border-radius: 50px;
      }
    }

    .info-num {
      font-weight: bold;
      margin: 0 2px;
    }

    &__bean {
      .info-badge {
        background: var(--bean-color);
      }
      .info-btn {
        color: var(--bean-color);
        &:before {
          border-color: var(--bean-color);
        }
      }
      .info-num {
        color: var(--bean-color);
      }
    }

    &__hongbao {
      .info-badge {
        background: var(--hongbao-color);
      }
      .info-btn {
        color: var(--hongbao-color);
        &:before {
          border-color: var(--hongbao-color);
        }
      }
      .info-num {
        color: var(--hongbao-color);
      }
    }
  }
}
</style>